import { FC, useEffect } from "react";
import { IconFont } from "../../../utils/iconfont/icon";
import styles from "./songLists.module.css";
import { Button, Radio, Spin, Skeleton, Statistic } from "antd";
import { useDispatch } from "react-redux";
import { BrowserRouter, Route, Switch, useHistory } from "react-router-dom";
import { Tabs } from "antd";
// import { Input } from "antd";
// import { SearchOutlined } from "@ant-design/icons";
import { useSelector } from "../../../redux/hooks";
import { getPlaylist, getUserDetail } from "../../../redux/userInfo/slice";
import { getsongList, getMvUrl } from "../../../redux/list/slice";
import { getMusicInfo, getSongUrl } from "../../../redux/musicInfo/slice";
import {
  CaretRightOutlined,
  DownloadOutlined,
  FolderAddOutlined,
  ShareAltOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";

const SongLists = (props: any) => {
  const { TabPane } = Tabs;
  const history = useHistory();
  // const { playlist } = useSelector((s) => s.listDetail);
  // const { songList, privilegesSongs } = useSelector((s) => s.listDetail);
  const dispatch = useDispatch();
  const { songList } = props;
  // useEffect(() => {
  //   if (songList) {
  //     let list = songList["trackIds"].map((x) => x.id);
  //     dispatch(getsongList({ ids: list }));
  //   }
  // }, [songList]);

  function callback(key) {
    console.log(key);
  }

  return (
    <div className={styles.page}>
      <div className={styles.actions}>
        <div className={styles.action}>操作</div>
        <div className={styles.titles}>
          <div>标题</div>
          <div>升序</div>
        </div>
        <div className={styles.singer}>歌手</div>
        <div className={styles.zhuanji}>专辑</div>
        <div className={styles.chixuTime}>时间</div>
      </div>
      {songList ? (
        <div className={styles.singleSong}>
          {songList.map((x, index) => {
            return (
              <div
                onDoubleClick={() => {
                  console.log(x);
                  dispatch(getMusicInfo({ id: x.id }));
                  dispatch(getSongUrl({ id: x.id }));
                }}
                className={styles.actionsItem}
              >
                <div className={styles.actionItem}>
                  {" "}
                  <span
                    style={{
                      padding: " 0 0 0 10px",
                      color: "#bfbfbf",
                    }}
                  >
                    {" "}
                    {index}
                  </span>
                  <div className={styles.aixin}>
                    {" "}
                    <IconFont
                      style={{ fontSize: " 16px" }}
                      type="icon-aixin"
                    />{" "}
                  </div>
                  <IconFont
                    style={{ fontSize: " 16px" }}
                    className={styles.xiazai}
                    type="icon-xiazai"
                  />
                </div>
                <div className={styles.titlesItem}>
                  <div>{x.name}</div>
                  {x.fee === 1 ? (
                    <div className={styles.VIP}>
                      <div>VIP</div>
                    </div>
                  ) : null}
                  {x.mv ? (
                    <div className={styles.mv}>
                      <div
                        onClick={() => {
                          console.log(x.mv);
                          dispatch(getMvUrl({ id: x.mv }));
                          history.push(`/MV?mvId=${x.mv}`);
                        }}
                      >
                        {" "}
                        MV
                      </div>
                    </div>
                  ) : null}
                  {x.cp !== 0 ? (
                    <div className={styles.SQ}>
                      <div>SQ</div>
                    </div>
                  ) : null}
                </div>
                <div className={styles.singerItem}>
                  <div style={{ cursor: "pointer" }}> {x.ar[0]["name"]}</div>
                </div>
                <div className={styles.zhuanjiItem}>
                  <span style={{ cursor: "pointer" }}>{x.al["name"]}</span>
                </div>
                <div
                  onClick={() => {
                    console.log(x.h["size"].toString());
                    console.log(Number(x.h["size"]));
                  }}
                  className={styles.chixuTimeItem}
                >
                  {x.h ? (
                    <div>{dayjs(Number(x.dt)).format("mm:ss")}</div>
                  ) : null}
                </div>
              </div>
            );
          })}
        </div>
      ) : (
        <>
          {" "}
          <Skeleton />
        </>
      )}
    </div>
  );
};

export default SongLists;
